<template>
  <div>
    
    <el-page-header style="margin:10px 0 40px 0px;" @back="goBack" content="店铺详情">
</el-page-header>
    <el-form :model="formData"
      :rules="rules"
      ref="formData"
      label-width="110px"
      class="demo-formData">
      <el-form-item label="店铺名称"
        prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址"
        prop="name">
        <el-input v-model="formData.address"></el-input>
      </el-form-item>
      <el-form-item label="店铺分类">
        <el-cascader :options="categoryOptions"
          v-model="selectedCategory"
          change-on-select></el-cascader>
      </el-form-item>
      <el-form-item label="营业时间"
        style="white-space: nowrap;">
        <el-time-select placeholder="起始时间"
          v-model="this.formData.opening_hours[0]"
          :picker-options="{
							start: '05:30',
							step: '00:15',
							end: '23:30'
							}">
        </el-time-select>
        <el-time-select placeholder="结束时间"
          v-model="this.formData.opening_hours[1]"
          :picker-options="{
							start: '05:30',
							step: '00:15',
							end: '23:30',
							minTime: formData.startTime
							}">
        </el-time-select>
      </el-form-item>
      <el-form-item label="联系电话"
        prop="phone">
        <el-input v-model.number="formData.phone"
          maxLength="11"></el-input>
      </el-form-item>
      <el-form-item label="店铺简介"
        prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="店铺标语"
        prop="promotion_info">
        <el-input v-model="formData.promotion_info"></el-input>
      </el-form-item>
      <el-form-item label="上传店铺头像">
        <el-upload class="avatar-uploader"
          :action="baseUrl + '/v1/addimg/shop'"
          :show-file-list="false"
          :on-success="handleShopAvatarScucess"
          :before-upload="beforeAvatarUpload">
          <img v-if="formData.image_path"
            :src="baseImgPath + formData.image_path"
            class="avatar">
          <i v-else
            class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商家服务"
        style="white-space: nowrap;">
        <span>品牌保证</span>
        <el-switch on-text=""
          v-model="formData.is_premium"></el-switch>
        <span>蜂鸟专送</span>
        <el-switch on-text=""
          v-model="formData.delivery_mode.is_solid"></el-switch>
        <span>新开店铺</span>
        <el-switch on-text=""
          v-model="formData.is_new"></el-switch>
      </el-form-item>
      <el-form-item style="white-space: nowrap;">
        <span>外卖保</span>
        <el-switch on-text=""
          v-model="formData.bao"></el-switch>
        <span>准时达</span>
        <el-switch on-text=""
          v-model="formData.zhun"></el-switch>
        <span>开发票</span>
        <el-switch on-text=""
          v-model="formData.piao"></el-switch>
      </el-form-item>
      <el-form-item class="button_submit">
        <el-button type="primary"
          @click="submitForm('formData')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../../utils/bus'
export default {
  created () {

    this.initData()
    console.log(3123123, this.$route)
    if(this.$route.params.type==='edit'){
      this.formData=this.$route.params.value
      this.formData.opening_hours=this.formData.opening_hours[0].split('/')
      console.log(111112,this.formData.opening_hours)
    }

  },
  data () {
    return {
      city: {},
      busData:'',
      formData: {
        name: '', //店铺名称
        address: '', //地址
        latitude: '',
        longitude: '',
        description: '', //介绍
        phone: '',
        promotion_info: '',
        float_delivery_fee: 5, //运费
        float_minimum_order_amount: 20, //起价
        is_premium: true,
        delivery_mode: true,
        new: true,
        bao: true,
        zhun: true,
        piao: true,
        opening_hours:['00:00','00:00'],
        image_path: '',
        business_license_image: '',
        catering_service_license_image: '',

      },
      rules: {
        name: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话' },
          { type: 'number', message: '电话号码必须是数字' }
        ],
      },
      options: [{
        value: '满减优惠',
        label: '满减优惠'
      }, {
        value: '优惠大酬宾',
        label: '优惠大酬宾'
      }, {
        value: '新用户立减',
        label: '新用户立减'
      }, {
        value: '进店领券',
        label: '进店领券'
      }],
      activityValue: '满减优惠',
      activities: [{
        icon_name: '减',
        name: '满减优惠',
        description: '满30减5，满60减8',
      }],
      baseUrl: '',
      baseImgPath: '',
      categories: '',
      categoryOptions: [],
      selectedCategory: ['快餐便当', '简餐']
    }
  },
  methods: {
    goBack(){
      this.$router.go(-1)
    },
    beforeAvatarUpload () { },
    handleShopAvatarScucess () { },
    foodCategory () {
      return axios.get("../../category.json").then(res => res.data)
    },
    async initData () {
      try {
        const categories = await this.foodCategory();
        console.log(categories)
        categories.forEach(item => {
          if (item.sub_categories.length) {
            const addnew = {
              value: item.name,
              label: item.name,
              children: []
            }
            item.sub_categories.forEach((subitem, index) => {
              if (index == 0) {
                return
              }
              addnew.children.push({
                value: subitem.name,
                label: subitem.name,
              })
            })
            this.categoryOptions.push(addnew)
            // console.log(this.categoryOptions)

          }
        })
      } catch (err) {
        console.log(err);
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          Object.assign(this.formData, { activities: this.activities }, {
            category: this.selectedCategory.join('/')
          })
          console.log(this.formData);
          this.busData=this.formData
          this.$message.success('保存成功')
          this.$router.go(-1)
        }else{
          this.$message.error('保存失败')
        }
      });
    },
  },
  beforeDestroy(){
    if(this.busData!=='')
    bus.$emit('getBusData',this.busData)
  }
}
</script>

<style>
</style>